import { Table, Space, Card, Button, Form, Input } from 'antd'
import React, { useEffect, useState } from 'react'
import { http } from '@/utils'
import Addorderuesrmodal from './components/Addorderuesrmodal'
import Listorderuesrmodal from './components/Listorderuesrmodal'
import { useStore } from '@/store'

const Userpermission = () => {
  const [varietyData, setVarietyData] = useState({
    list: [],
    count: 0
  })

  let AddorderuesrRef = React.createRef()
  let ListorderuesrRef = React.createRef()
  const { loginStore } = useStore()

  const [params, setParams] = useState({
    pageNum: 1,
    userId: loginStore.userId,
    pageSize: 20
  })

  // 添加交易账号
  const addOrderuser = (row) => {
    AddorderuesrRef.current.openModalOpen(row)
  }

  // 交易账号列表
  const orderuserList = (row) => {
    ListorderuesrRef.current.openModalOpen(row)
  }

  const pageChange = (page, pageSize) => {
    setVarietyData({ list: [], count: 0 })
    setParams({
      ...params,
      pageSize: pageSize,
      pageNum: page
    })
  }
  useEffect(() => {
    const getList = async () => {
      const res = await http.post('/alarm/deliversign/userList', {
        ...params,
        limit: params.pageSize,
        pageCurrent: params.pageNum
      })
      console.log('用户列表-', res.body)
      const list = res.body.list.map((item, i) => {
        return {
          ...item,
          i: i + 1
        }
      })
      const total = res.body.total
      setVarietyData({
        list: list,
        count: total
      })
    }
    getList()
  }, [params])
  /* 表单筛选功能实现 */
  const onSeach = (values) => {
    // 数据处理
    const _params = { ...values }
    // 修改params数据 引起接口的重新发送 对象的合并是一个整体覆盖 改了对象的整体引用
    setParams({
      ...params,
      ..._params,
      pageNum: 1,
    })
  }
  const columns = [
    { title: '序号', dataIndex: 'i', width: 100, },
    { title: '用户名称', dataIndex: 'username', minWidth: 220 },
    { title: '用户id', dataIndex: 'userId', minWidth: 220, },
    { title: '手机号', dataIndex: 'mobile', minWidth: 220, },
    { title: '邮箱', dataIndex: 'email' },
    {
      title: '操作',
      render: data => {
        return (
          <Space size="middle">
            <Button size="small" onClick={() => orderuserList(data)}>交易账号</Button>
            <Button size="small" onClick={() => addOrderuser(data)}>添加</Button>
            <span>|</span>
            <Button size="small" disabled>编辑</Button>
            <Button size="small" disabled>删除</Button>
          </Space>
        )
      },
      fixed: 'right'
    }
  ]
  return (
    <>
      <Card title="用户列表">
        <Form
          onFinish={onSeach}
          layout='inline'
        >
          <Form.Item label="用户名称" name="userName" >
            <Input
              allowClear
              placeholder='请输入用户名称'
              style={{ width: 200 }}
            />
          </Form.Item>
          <Form.Item >
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button type="primary" style={{ marginLeft: 20 }} disabled>
              添加
            </Button>
          </Form.Item>
        </Form>
        <Table
          style={{ marginTop: 20 }}
          rowKey="userId"
          size='small'
          columns={columns}
          dataSource={varietyData.list}
          pagination={
            {
              size: 'default',
              showQuickJumper: true,
              showSizeChanger: true,
              pageSize: params.pageSize,
              total: varietyData.count,
              onChange: pageChange,
              current: params.pageNum,
              showTotal: (total, range) => `共 ${total} 条`,
            }
          }
          bordered
        />
      </Card >
      <Addorderuesrmodal onRef={AddorderuesrRef} />
      <Listorderuesrmodal onRef={ListorderuesrRef} />
    </>
  )
}

export default Userpermission